<template>
  <el-card shadow="hover" class="article-card" @click="goDetail" style="cursor:pointer">
    <h3 class="title">{{ article.title }}</h3>
    <p class="desc">{{ plainDesc }}</p>

    <!-- 标签展示 -->
    <div class="tag-list">
      <el-tag
        v-for="tag in article.tags"
        :key="tag.id"
        type="success"
        size="small"
        class="tag-item"
      >
        {{ tag.name }}
      </el-tag>
    </div>

    <!-- 作者和时间 -->
    <div class="footer">
      <span class="author">作者：{{ article.author }}</span>
      <span class="time">发布时间：{{ article.create_at }}</span>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { useRouter } from 'vue-router'
import removeMd from 'remove-markdown'

interface Tag {
  id: number
  name: string
}

interface Article {
  id: number
  title: string
  desc: string
  author: string
  create_at: string
  tags: Tag[]
}

const props = defineProps<{ article: Article }>()
const router = useRouter()

const goDetail = () => {
  router.push({ name: 'ArticleDetail', params: { id: props.article.id } })
}

const plainDesc = computed(() => {
  if (!props.article.desc) return ''
  const text = removeMd(props.article.desc).replace(/\n/g, ' ')
  return text.length <= 100 ? text : text.slice(0, 100) + '...'
})
</script>

<style scoped>
.article-card {
  margin-bottom: 20px;
  padding: 16px;
}
.title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}
.desc {
  font-size: 14px;
  color: #555;
  margin-bottom: 12px;
  line-height: 1.5;
}
.tag-list {
  margin-bottom: 12px;
}
.tag-item {
  margin-right: 6px;
  margin-bottom: 6px;
}
.footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}
.author,
.time {
  user-select: none;
}
</style>
